<html class="ui-mobile">

<head>
    <title>Internet Explorer 6</title>
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link type="text/css" href="jquery.ui.chatbox.css" rel="stylesheet" />
	<link type="text/css" href="bootstrap.css" rel="stylesheet" />
	<link type="text/css" href="bootstrap.min.css" rel="stylesheet" />
	<link type="text/css" href="temp.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.ui.chatbox.js"></script>
    <script type="text/javascript" src="chatboxManager.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
	  var chart;
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Descrpcion', 'Cantidad'],
          ['Atenciones por agente - cerradas', 4],
          ['Atenciones por agente - no cerradas',      1],
          ['Atenciones por agente - reasignadas',  1]
        ]);

        var options = {
          pieHole: 0.4,
          chartArea:{width:"95%",height:"95%"},
          legend:{alignment: "center"}
        };

        chart = new google.visualization.PieChart(document.getElementById('donutchart'));
		google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, options);
      }
		function selectHandler(e) {
			var item = chart.getSelection();
			alert("<" + item[0].row + ">");
			console.log(item);
		}
    </script>
	<script>
		$(function() {
			$( "#from" ).datepicker({
				defaultDate: "+0w",
				changeMonth: true,
				dateFormat: "dd/mm/yy",
				showAnim: "clip",
				numberOfMonths: 1,
				onClose: function( selectedDate ) {
					$( "#to" ).datepicker( "option", "minDate", selectedDate );
				}
			});
			$( "#to" ).datepicker({
				defaultDate: "+1d",
				changeMonth: true,
				dateFormat: "dd/mm/yy",
				showAnim: "clip",
				numberOfMonths: 1,
				onClose: function( selectedDate ) {
					$( "#from" ).datepicker( "option", "maxDate", selectedDate );
				}
			});
		});

		function buscar() {
			console.log("buscar!");
			console.log($( "#from" ).val());
		}

		function hoy() {
			console.log("hoy!");
		}
	</script>
	<script type="text/javascript">
		function mostrarDialogo(id) {
			$("#divDialogMsg").html(id);
			//document.getElementById("dialog-confirm").title = id;
			//$("#dialog-confirm").attr('title', 'Titulo #'+id);
			$( "#dialog-confirm" ).dialog({
				resizable: true,
				height:350,
				modal: true,
				title: 'Titulo #'+id,
				buttons: {
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				}
			});

		}
	</script>
</head>

<body class="ui-mobile-viewport ui-overlay-a">
	<div id="dialog-confirm" title="Buscar agente" style="display:none;">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><div id="divDialogMsg">bla bla bla bla bla bla bla</div></p>
		<table class="table table-hover">
			<thead>
				<tr>
					<th> ID </th>
					<th> Agente </th>
					<th> Accion </th>
				</tr>
			</thead>
			<tbody id="tablaTbodyBusquedaAgentes">
			</tbody>
		</table>
	</div>

	<div id="divBarraSuperior" class="ui-div-barra-superior">
		<div id="divNombre" class="ui-div-nombre">
			-
		</div>
		<div id="hora" class="ui-div-hora">
			--:--:--
		</div>
	</div>
	<div id="main">
		<div id="datosGenerales" class="ui-datos-generales">
			<div id="datosConexionContainer">
				<div class="ui-titulo-seccion">
					Datos de conexion
				</div>
				<div id="datosConexion">
					<table id="tablaConexion" class="ui-tabla-conexion table table-hover">
						<thead>
							<tr>
								<th class="ui-tabla-conexion-columna-descripcion"></th>
								<th class="ui-tabla-conexion-columna-hora"> Hora </th>
								<th class="ui-tabla-conexion-columna-total-horas"> Total horas </th>
							</tr>
						</thead>
						<tbody id="tablaTbodyConexion">
							<tr>
								<td class="ui-tabla-conexion-columna-descripcion">
									Inicio de conexion
								</td>
								<td class="ui-tabla-conexion-columna-hora">
									<div id="inicioConexionHora">--:--:--</div>
								</td>
								<td class="ui-tabla-conexion-columna-total-horas">
									<div id="inicioConexionTotalHoras">--:--:--</div>
								</td>
							</tr>
							<tr>
								<td class="ui-tabla-conexion-columna-descripcion">
									Fin de conexion
								</td>
								<td class="ui-tabla-conexion-columna-hora">
									<div id="finConexionHora">--:--:--</div>
								</td>
								<td class="ui-tabla-conexion-columna-total-horas">
									<div id="finConexionTotalHoras">--:--:--</div>
								</td>
							</tr>
							<tr>
								<td class="ui-tabla-conexion-columna-descripcion">
									Pausa
								</td>
								<td class="ui-tabla-conexion-columna-hora">
									<div id="pausaConexionHora">--:--:--</div>
								</td>
								<td class="ui-tabla-conexion-columna-total-horas">
									<div id="pausaConexionTotalHoras">--:--:--</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="solicitudesContainer">
				<div class="ui-titulo-seccion">
					Solicitudes
				</div>
				<div>
					<div id="cooperacionContainer">
						<div id="tituloCooperacion" class="ui-subtitulo-solicitud">
							Cooperacion
						</div>
						<div>
							<div id="divTablaCooperacion" class="ui-div-tabla-cooperacion">
								<table id="tablaCooperacion" class="ui-tabla-cooperacion table table-hover table-bordered">
									<thead>
										<tr>
											<th class="ui-tabla-cooperacion-columna-numero"> # </th>
											<th class="ui-tabla-cooperacion-columna-mensaje"> Mensaje </th>
											<th class="ui-tabla-cooperacion-columna-acciones"> Acciones </th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td colspan="3" class="ui-tabla-cooperacion-td">
												<div class="scrollit ui-tabla-cooperacion-div-scroll">
													<table class="table table-hover table-bordered">
														<tbody id="tablaTbodyCooperacion">
															<tr>
																<td class="ui-tabla-cooperacion-columna-numero">
																	1
																</td>
																<td class="ui-tabla-cooperacion-columna-mensaje-contenido">
																	Mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje
																</td>
																<td class="ui-tabla-cooperacion-columna-acciones-contenido">
																	
																		<div>
																			<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a>
																		</div>
																		<div>
																			<a onclick="mostrarDialogo(1)" class="ui-div-link-pointer">Asignar agente</a>
																		</div>
																</td>
															</tr>
															<tr>
																<td class="ui-tabla-cooperacion-columna-numero">
																	2
																</td>
																<td class="ui-tabla-cooperacion-columna-mensaje-contenido">
																	Mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje
																</td>
																<td class="ui-tabla-cooperacion-columna-acciones-contenido">
																	<div>
																		<div>
																			<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a>
																		</div>
																		<div>
																			<a onclick="mostrarDialogo(2)" class="ui-div-link-pointer">Asignar agente</a>
																		</div>
																	</div>
																</td>
															</tr>
															<tr>
																<td class="ui-tabla-cooperacion-columna-numero">
																	3
																</td>
																<td class="ui-tabla-cooperacion-columna-mensaje-contenido">
																	Mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje
																</td>
																<td class="ui-tabla-cooperacion-columna-acciones-contenido">
																	<div>
																		<div>
																			<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a>
																		</div>
																		<div>
																			<a onclick="mostrarDialogo(3)" class="ui-div-link-pointer">Asignar agente</a>
																		</div>
																	</div>
																</td>
															</tr>
														</tbody>
													</table>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div id="reasignacionContainer">
						<div id="tituloReasignacion" class="ui-subtitulo-solicitud">
							Reasignacion
						</div>
						<div>
							<div id="divTablaReasignacion" class="ui-div-tabla-reasignacion">
								<table id="tablaReasignacion" class="ui-tabla-reasignacion table table-hover table-bordered">
									<thead>
										<tr>
											<th class="ui-tabla-reasignacion-columna-numero"> # </th>
											<th class="ui-tabla-reasignacion-columna-mensaje"> Mensaje </th>
											<th class="ui-tabla-reasignacion-columna-acciones"> Acciones </th>
										</tr>
									</thead>
									<tbody id="tablaTbodyReasignacion">
										<tr>
											<td colspan="3" class="ui-tabla-reasignacion-td">
												<div class="scrollit ui-tabla-reasignacion-div-scroll">
													<table class="table table-hover table-bordered">
														<tr>
															<td class="ui-tabla-reasignacion-columna-numero">
																1
															</td>
															<td class="ui-tabla-reasignacion-columna-mensaje-contenido">
																Mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje
															</td>
															<td class="ui-tabla-reasignacion-columna-acciones-contenido">
																<div>
																	<div>
																		<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a>
																	</div>
																	<div>
																		<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Asignar agente</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td class="ui-tabla-reasignacion-columna-numero">
																2
															</td>
															<td class="ui-tabla-reasignacion-columna-mensaje-contenido">
																Mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje
															</td>
															<td class="ui-tabla-reasignacion-columna-acciones-contenido">
																<div>
																	<div>
																		<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a>
																	</div>
																	<div>
																		<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Asignar agente</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td class="ui-tabla-reasignacion-columna-numero">
																3
															</td>
															<td class="ui-tabla-reasignacion-columna-mensaje-contenido">
																Mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje
															</td>
															<td class="ui-tabla-reasignacion-columna-acciones-contenido">
																<div>
																	<div>
																		<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a>
																	</div>
																	<div>
																		<a onclick="showChatDetail(1)" class="ui-div-link-pointer">Asignar agente</a>
																	</div>
																</div>
															</td>
														</tr>
													</table>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="detalle" class="ui-detalle">
			<div id="opciones">
				<div class="ui-div-fechas-rango">
					<div class="ui-div-fecha-inicio">
						<label for="from" class="ui-text-align-left">Desde</label>
						<input type="text" id="from" name="from" class="ui-input-fecha">
					</div>
					<div class="ui-div-fecha-fin">
						<label for="to" class="ui-text-align-left">Hasta</label>
						<input type="text" id="to" name="to" class="ui-input-fecha">
					</div>
					<div class="ui-div-botones">
						<div id="divOpcBuscar" class="ui-div-half-width-left">
							<input type="button" value="Buscar" class="ui-button-full-width" onclick="buscar()"/>
						</div>
						<div id="opOpcHoy" class="ui-div-half-width-right">
							<input type="button" value="Hoy" class="ui-button-full-width" onclick="hoy()"/>
						</div>
					</div>
				</div>
			</div>
			<div id="paneles">
				<div id="panelIzquierdo" class="ui-panel-izquierdo">
					<div class="ui-titulo-seccion">
						Atenciones supervisadas
					</div>

					<div id="divTablaTotal" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaTotal" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Descripcion </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodyTotal">
								<tr onclick="verDetalleTotal()">
									<td class="ui-tabla-resultados-columna-detalles">
										Total de atenciones supervisadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalSupervisado">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeTotal">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleSETotal()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones SE
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalSE">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeSE">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleAgenteTotal()">
									<td class="ui-div-tabla-resultados-columna-detalles">
										Atenciones por Agente
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalAgente">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeAgente">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaSE" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaSE" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Atenciones Sistema Experto </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodySE">
								<tr onclick="verDetalleSECerradas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones SE - Cerradas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalSECerradas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeSECerradas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleSENoCerradas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones SE - No cerradas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalSENoCerradas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeSENoCerradas">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaSEDetalle" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaSEDetalle" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Atenciones SE No Cerradas </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodySEDetalle">
								<tr onclick="verDetalleSEAbandonadas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Abandonadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalSEAbandonadas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeSEAbandonadas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleSEConectadas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Conectadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalSEConectadas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeSEConectadas">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaAgente" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaAgente" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Atenciones Agente </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodyAgente">
								<tr onclick="verDetalleAgenteCerradas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones por Agente - Cerradas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalAgenteCerradas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeAgenteCerradas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleAgenteNoCerradas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones por Agente - No cerradas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalAgenteNoCerradas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeAgenteNoCerradas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleReasignacionTotal()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones por Reasignación
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalReasignacion">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeReasignacion">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaAgenteDetalle" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaAgenteDetalle" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Atenciones Agente No Cerradas </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodyAgenteDetalle">
								<tr onclick="verDetalleAgenteAbandonadas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Abandonadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalAgenteAbandonadas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeAgenteAbandonadas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleAgenteConectadas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Conectadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalAgenteConectadas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeAgenteConectadas">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaAgente" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaAgente" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Atenciones - Reasignaciones </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodyAgente">
								<tr onclick="verDetalleReasignacionCerradas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Reasignación - Cerradas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalReasignacionCerradas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeReasignacionCerradas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleReasignacionNoCerradas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Reasignación - No cerradas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalReasignacionNoCerradas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeReasignacionNoCerradas">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaReasignacionDetalle" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaReasignacionDetalle" class="table table-hover table-bordered">
							<thead>
								<tr style="cursor: auto;">
									<th class="ui-tabla-resultados-columna-detalles"> Atenciones Reasignadas No Cerradas </th>
									<th class="ui-tabla-resultados-columna-cantidad"> Cantidad </th>
									<th class="ui-tabla-resultados-columna-porcentaje"> % </th>
								</tr>
							</thead>
							<tbody id="tablaTbodyReasignacionDetalle">
								<tr onclick="verDetalleReasignacionAbandonadas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Abandonadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalReasignacionAbandonadas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeReasignacionAbandonadas">-</div>
									</td>
								</tr>
								<tr onclick="verDetalleReasignacionConectadas()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atenciones Conectadas
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalReasignacionConectadas">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeReasignacionConectadas">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divTablaCooperacion" class="table-responsive ui-div-tabla-resultados">
						<table id="tablaCooperacion" class="table table-hover table-bordered">
							<tbody id="tablaTbodyCooperacion">
								<tr onclick="verDetalleCooperacion()">
									<td class="ui-tabla-resultados-columna-detalles">
										Atencion por cooperacion
									</td>
									<td class="ui-tabla-resultados-columna-cantidad">
										<div id="totalCooperacion">-</div>
									</td>
									<td class="ui-tabla-resultados-columna-porcentaje">
										<div id="porcentajeCooperacion">-</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="divOpciones" class="ui-div-opciones">
						<div id="opGeneral" class="ui-div-half-width-left">
							<input id="btnGeneral" type="button" value="General" class="ui-button-full-width" onclick="drawTotalSupervisadas()"/>
						</div>

						<div id="opAnterior" class="ui-div-half-width-right">
							<input  id="btnAnterior" type="button" value="Anterior" class="ui-button-full-width" onclick="drawAnterior()"/>
						</div>
					</div>

					<div id="divGrafico">
						<div id="donutchart" class="ui-div-pie-chart"></div>
					</div>
				</div>

				<div id="panelDerecho" class="ui-panel-derecho">
					<div class="ui-titulo-seccion">
						Detalle de atencion
					</div>

					<div id="divTablaDetalleAtencion" class="table-responsive ui-div-tabla-detalles">
						<table id="tablaDetalleAtencion" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th> # </th>
									<th> Usuario </th>
									<th> Hora inicio </th>
									<th> Hora fin </th>
									<th> Total </th>
									<th> Acciones </th>
								</tr>
							</thead>
							<tbody id="tablaTbodyDetalleAtencion">
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>